<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><? $pageTitle ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=<? $html_encoding ?>"/>
    <link rel="stylesheet" href="<? $WG_SRC ?>../common/html/cssbased/base.css" type="text/css"/>
    
    <!--script src="<? $WG_SRC ?>../common/html/classic/tree_templates/tree_functions.js"  type="text/javascript"></script>
    <script src="<? $WG_SRC ?>../common/html/includes/modules/JsHttpRequest/JsHttpRequest.js" type="text/javascript"></script-->
    
    <script src="<? $WG_SRC ?>../PDList/html/cssbased/xsystem.js"></script>
</head>
<body onLoad="start()" onResize="resizeWindow();" onClick='killPanelTimer()' onMouseMove='killPanelTimer()'>
		<? assign var="bigSize" value="1024" ?>
    
    <script src='<? $WG_SRC ?>widgets/_common/public/js/mootools.js'></script>

		<style>
			img {border: 0px}
			body {background: #111; font-family: "Trebuchet MS"; font-size: 1em; margin: 0px; padding: 0px; overflow: hidden}
			
			#panel, #descPanel {
				position: absolute; 
				width: 100%; 
				text-align: center; 
				
				bottom: 0px; 
				z-index: 5
			}
			
			#descPanel {bottom: 70px}
			
			#panelInner, #descInner {
				width: 590px;
				margin-left: auto; margin-right: auto;
				padding: 10px 0px; 
				padding-top: 15px;
				text-align: center;
				background: #222; 
			}
			
			#descPanel {text-align: left}
			#descInner {background: #555; text-align: left; color: white; padding: 5px 0px; font-size: 14px; text-align: center; }
			
			#panelInner table tr td {padding-left: 5px; padding-right: 5px; color: white; font-size: 16px; font-weight: bold}
			#panelInner table tr td a {color: white; font-weight: normal; font-size: 14px}
		</style>

		<script>
			var myImages = new Array ();
			var image = null;
			var currentImageNum = 0;
			
			var showedImage = null;
			var nextImage = null;
			
			
			<? foreach from=$filesList key=key item=file ?>
				image = new Object ();
				image.source = '<? $file.url.$bigSize ?>';
				image.w = '<? $file.w ?>';
				image.h = '<? $file.h ?>';
				image.desc = "<? if $file.PL_DESC ?><? $file.PL_DESC|htmlsafe|escape:javascript|truncate:1000 ?><? else ?>&lt;<? $pdStrings.pd_slideshow_nodesc_label ?>&gt;<? /if ?>";
				myImages[myImages.length] = image;
			<? /foreach ?>
			
			function showImage (num) {
				if (num == null)
					num = currentImageNum;
				
				if (num < 0)
					num = myImages.length - 1;
				if (num >= myImages.length) {
					num = 0;
				}
					
				currentImageNum = num;
				
				//bigImage.src = "s.gif";
				
				//bigImage.parentNode.appendChild(newImg);
				//resizeImage (); 
				//showImageSrc ();
				window.setTimeout("showImageSrc()", 2);
			}
			
			var mimageLoadedFunc = null;
			var showedImageLoaded = false;
			function showImageSrc () {
				if (nextImage.src != myImages[currentImageNum].source || !showedImageLoaded) {
					mimageLoadedFunc = myLoadedFunc;
					nextImage.src = getImageSource(currentImageNum);
				} else {
					mimageLoadedFunc = myLoadedFunc;
					myLoadedFunc (nextImage);
				}
				/*if (currentImageNum < myImages.length -1)
				{
					var mySecondImage = new Image();
					mySecondImage.src = myImages[currentImageNum+1].src;
				}*/
				/*if (currentImageNum < myImages.length -2) {
					var mySecondImage2 = new Image();
					mySecondImage2.src = myImages[currentImageNum+2].src;
				}*/
			}
			
			function myLoadedFunc () {
				resizeImage (nextImage);
				var nextStyle = new Fx.Style(nextImage.id, "opacity", {duration: 500});
				var showedStyle = new Fx.Style(showedImage.id, "opacity", {duration: 50});
				
				showedStyle.start (0);
				nextStyle.start(1);		
				
				//showedImage.src = "s.gif";
				var buffer = nextImage;
				nextImage = showedImage;
				showedImage = buffer;
				
				window.setTimeout("preloadNextImage()", 300);
				
				$("descInnerTxt").innerHTML = myImages[currentImageNum].desc;
				mimageLoadedFunc = null;
			}
			
			var cacheImages = new Array ();
			function getImageSource(index) {
				if (cacheImages[index] == null) {
					cacheImages[index] = new Image();
					cacheImages[index].src = myImages[index].source;
				}
				return cacheImages[index].src;
			}
			
			function preloadNextImage() {
				if (currentImageNum < myImages.length -1)
				{
					//alert("preload");
					nextImage.src = getImageSource(currentImageNum+1);
					showedImageLoaded = false;
				}
			}
			
			function imageLoaded (cimage) {
				if (cimage == nextImage) {
					if (mimageLoadedFunc != null) {
						mimageLoadedFunc ();
					} else {
						showedImageLoaded = true;
					}
				}
				//alert(cimage);		
			}
			
			function showFirstImage () {
				currentImageNum = 0;
				showImage();
				stopSlideshow ();
			}
			
			function showLastImage () {
				currentImageNum = myImages.length-1;
				showImage();
				stopSlideshow ();
			}
			
			
			function showNextImage () {
				currentImageNum++;
				showImage();
			}
			
			function showPrevImage () {
				currentImageNum--;
				showImage();
			}
			
			var played = false;
			function playStopSlideshow () {
				played = !played;
				$("playBtn").src = (played) ? "<? $WG_SRC ?>widgets/PDList/public/img/slideshow/pause.gif" : "<? $WG_SRC ?>widgets/PDList/public/img/slideshow/play.gif";
				if (!played && slideshowTimer!= null) {
					window.clearTimeout(slideshowTimer);
					slideshowTimer = null;
				}
				if (played && slideshowTimer == null)
					slideshowTimer = window.setTimeout("doSlideshow()", slideshowSpeed*1000);
			}
			
			function stopSlideshow () {
				played = true;
				playStopSlideshow ();
			}
			
			function startSlideshow () {
				played = false;
				playStopSlideshow ();
			}
			
			
			var slideshowSpeed = <? $widgetParams.SLSECONDS|default:3 ?>;
			var slideshowTimer = null;
			function doSlideshow () {
				if (mimageLoadedFunc == null)
					showNextImage ();
				slideshowTimer = window.setTimeout ("doSlideshow()", slideshowSpeed*1000);
			}
			
			function showSlideshowSpeed () {
				$("slideshowSpeed").innerHTML = slideshowSpeed + " <? $pdStrings.pd_slideshow_seconds_label ?>";
			}
			
			function slideshowSlower () {
				if (slideshowSpeed > 1)
					slideshowSpeed--;		
				showSlideshowSpeed ();
			}
			
			function slideshowFaster () {
				if (slideshowSpeed < 20)
					slideshowSpeed++;		
				showSlideshowSpeed ();
			}
			
			panelTimer = null;
			function checkNeedPanel () {
				window.setTimeout ("checkNeedPanel()", 1000);
				if (panelTimer == null) {
					panelTimer = window.setTimeout ("hidePanel()", 2000);
				}
			}
			
			function killPanelTimer () {
				if (panelTimer != null) {
					window.clearTimeout (panelTimer);
					panelTimer = null;
				}
				<? if $widgetParams.SLCPANEL == "disable" ?>
					return;
				<? /if ?>
				if ($("panel").style.display == "none")
					$("panel").style.display = "block";
			}
			
			function hidePanel () {
				//alert("Hide");
				if ($("panel") && $("panel").style.display != "none")
					$("panel").style.display = "none";
				panelTimer = null;
			}
			
			function resizeWindow () {
				//$("panelInner").style.marginLeft = ((document.documentElement.clientWidth - 500) /2) + "px";
				resizeImage ();
			}
			
			function resizeImage(img) {
				var cimage = myImages[currentImageNum];
				var clientHeight  = document.documentElement.clientHeight;
				var clientWidth = document.documentElement.clientWidth;
				
				if (clientHeight == 0 && document.clientHeight != null)
					clientHeight = document.clientHeight;
				if (clientWidth == 0 && document.clientWidth != null)
					clientWidth = document.clientWidth;
			
			
				if (img == null)
					img = showedImage;
					
				var ratio = cimage.h / cimage.w;
				if (cimage.w > clientWidth) {
					newWidth = clientWidth;
					newHeight = newWidth * ratio;
					img.style.width = clientWidth + "px";
					img.style.height = newHeight + "px";
				} else {
					newHeight = cimage.h;
					img.style.height = newHeight + "px";
				}
				
				var ch = getElementComputedStyle (img, "height");
				ch = ch.substr(0,ch.length-2);
				
				if (ch > clientHeight) {
					newHeight = clientHeight;
					newWidth = newHeight/ratio;
					img.style.height = newHeight + "px";
					img.style.width = newWidth + "px";
				}
				
				
				if (cimage.w <= clientWidth && cimage.h <= clientHeight) {
					newWidth = cimage.w;
					newHeight = cimage.h;
					img.style.width = newWidth + "px";
					img.style.height = newHeight + "px";
				}
				
				
				img.style.top = (clientHeight-newHeight)/2 + "px";
				img.style.left = (clientWidth-newWidth)/2 + "px";
			}
			
			var showDescriptions = true;
			function toggleDescriptions () {
				showDescriptions = !showDescriptions;
				$("descInner").style.display = showDescriptions ? "block" : "none";
				$("descriptionsLink").innerHTML = 	showDescriptions ? "<? $pdStrings.pd_slideshow_hidedesc_label	 ?>" : "<? $pdStrings.pd_slideshow_showdesc_label	 ?>";
			}
		</script>



		
			<img galleryimg="no" id='bigImage' src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/s.gif' style='position: absolute; left: 0px; top: 0px; ' onLoad='imageLoaded(this)'>
			<img galleryimg="no" id='nextImage' src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/s.gif' style='position: absolute; left: 0px; top: 0px; ' onLoad='imageLoaded(this)'>
		

		<div id='descPanel'>
			<div id='descInner'>
				<div id='descInnerTxt'><? $pdStrings.pd_slideshow_loading_label ?></div>
				
			</div>
		</div>
			

		<div id='panel'>
			<div id='panelInner'>
				<img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/pause.gif' style='display: none'>
				<table align='center' cellspacing='0' cellpadding='0'>
					<tr>
						<td><a href='javascript:void(0)' onFocus='this.blur()' onClick='showFirstImage()' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/first.gif'></a></td>
						<td><a href='javascript:void(0)' onFocus='this.blur()' onClick='showPrevImage(); stopSlideshow ();' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/prev.gif'></a></td>
						<td><a href='javascript:void(0)' onFocus='this.blur()' onClick='playStopSlideshow()' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/play.gif' id='playBtn'></a></td>
						<td><a href='javascript:void(0)' onFocus='this.blur()' onClick='showNextImage(); stopSlideshow ();' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/next.gif'></a></td>
						<td><a href='javascript:void(0)' onClick='showLastImage()' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/last.gif'></a></td>
						<td>&nbsp;&nbsp;</td>
						<td>
							<a href='javascript:void(0)' onClick='slideshowSlower()' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/minus.gif'></a>
						</td>
						<td>
							<span id='slideshowSpeed'></span>
						</td>
						<td>
							<a href='javascript:void(0)' onClick='slideshowFaster()' style='color: white'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/plus.gif'></a>
						</td>
						<td width="120" nowrap=true>
							<a href='javascript:void(0)' onClick='toggleDescriptions ()' id='descriptionsLink'><? $pdStrings.pd_slideshow_hidedesc_label ?></a>
						</td>
						<? if $canBack ?>
							<td width="40">
								<a href='javascript:void(0)' title='<? $pdStrings.pd_slideshow_close_label ?>' onClick='history.back();return false;'><img src='<? $WG_SRC ?>widgets/PDList/public/img/slideshow/close.gif' alt='<? $pdStrings.pd_slideshow_close_label ?>'></a>
							</td>
						<? /if ?>
					</tr>
				</table>		
			</div>
		</div>

		<script>
			$("panelInner").setStyle("opacity", 0.8);
			
			function start () {
				showedImage = $("bigImage");
				nextImage = $("nextImage");
				nextImage.setStyle("opacity", 0);
				$("descInner").setStyle("opacity", 0.7);
				
				showSlideshowSpeed ();
				checkNeedPanel ();
				showImage(<? $params.currentImageNum|default:0 ?>);
				resizeImage();
				
				<? if $widgetParams.SLCPANEL == "disable" ?>
					hidePanel ();
				<? /if ?>
				
				<? if $params.mode!="preview" && $widgetParams.SLONCLICK!='pause' ?>
					window.setTimeout("startSlideshow()", 500);
				<? /if ?>
			}
			
			
			function getElementComputedStyle(elem, prop)
			{
			  if (typeof elem!="object") elem = document.getElementById(elem);
			  
			  // external stylesheet for Mozilla, Opera 7+ and Safari 1.3+
			  if (document.defaultView && document.defaultView.getComputedStyle)
			  {
			    if (prop.match(/[A-Z]/)) prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
			    return document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop);
			  }
			  
			  // external stylesheet for Explorer and Opera 9
			  if (elem.currentStyle)
			  {
			    var i;
			    while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2);
			    return elem.currentStyle[prop];
			  }
			  
			  return "";
			}
		</script>
    
</body>
</html>